<template>
	<view>
		<view class="header">
			<text>新增优惠劵</text>
			<button @click="toDis">+新增</button>
		</view>
		<view class="button-group">
			<button class="button1" @click="onclick1" :style="{backgroundColor:color1}">进行中</button>
			<button class="button2" @click="onclick2" :style="{backgroundColor:color2}">已结束</button>
		</view>
		
		<view v-if="isTrue" class="inProgress" 
				v-for="item in dataList1" 
				:key="item.id" 
				:style="{backgroundColor:color3}"
				>
			<view class="coupon-content">
				<!-- 左边 -->
				<view class="left-section">
					<view class="text1">满{{item.money1}}减</view>
					<view class="text2">{{item.money2}}</view>
				</view>
				<!-- 右边 -->
				<view class="rightText">
					<view class="info-row">
						<text>优惠劵名称:</text>
						<text>新用户专享体验券</text>
					</view>
					<view class="info-row">
						<text>有效期:</text>
						<text>2020.3.18-2020.4.18</text>
					</view>
					<view class="info-row">
						<text>每人限领一张</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 已结束的优惠券部分使用相同的结构 -->
		<view v-else class="Ended" :style="{backgroundColor:color4}">
			<!-- 相同的结构，只是数据源改为 dataList2 -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList1:[
					{id:1,money1:288,money2:15},
					{id:2,money1:1213,money2:122}
				],
				dataList2:[
					{id:3,money3:156,money4:32},
					{id:4,money3:126,money4:43}
				],
				isTrue:true,
				color1: "#0D7AF7",
				color2: "#89B0EC",
				color3: "#0D7AF7",
				color4:""
			}
		},
		methods: {
			onclick1(){
				this.isTrue = true
				this.color1= "#0D7AF7"
				this.color2= "#89B0EC"
			},
			onclick2(){
				this.isTrue = false
				this.color1= "#89B0EC"
				this.color2= "#0D7AF7"
				this.color4= "#89B0EC"
			},
			toDis(){
				uni.navigateTo({
					url:"/pages/CardManagement/DistributeCoupons"
				})
			}
			
		}
	}
</script>

<style>
	page{
		background-color: #FFFFFF;
	}
	.text5{
		top: 9px;
		left: 20px;
		height: 17px;
		line-height: 17px;
		color: rgba(255,255,255,0.8);
		font-size: 12px;
		text-align: left;
		position: relative;
	}
	.text4{
		left: 20px;
		top: 6px;
		height: 17px;
		line-height: 17px;
		color: rgba(255,255,255,0.55);
		font-size: 12px;
		text-align: left;
		position: relative;
	}
	.text3{
		top: 2px;
		left: 20px;
		height: 17px;
		line-height: 17px;
		color: rgba(255,255,255,0.55);
		font-size: 12px;
		text-align: left;
		position: relative;
	}
	.rightText{
		top: -70px;
		left: 150px;
		width: 168px;
		height: 62px;
		border-left: 1px solid #FFFFFF;
		position: relative;
	}
	.text2{
		left: 47px;
		top: 10px;
		height: 67px;
		line-height: 67px;
		color: rgb(255,255,255);
		font-size: 48px;
		text-align: left;
		position: relative;
	}
	.text1{
		left: 51px;
		top: 11px;
		height: 20px;
		line-height: 20px;
		color: rgba(255,255,255,1);
		font-size: 14px;
		text-align: left;
		position: relative;
	}
	.inProgress{
		left: 17px;
		top: 20px;
		margin-top: 20px;
		margin-right: 32px;
		height: 101px;
		border-radius: 8px;
		/* background-color: rgba(13,122,247,1); */
		color: #FFFFFF;
		text-align: center;
		position: relative;
	}
	.Ended{
		left: 17px;
		top: 20px;
		margin-top: 20px;
		margin-right: 32px;
		height: 101px;
		border-radius: 8px;
		/* background-color: rgba(13,122,247,1); */
		color: #FFFFFF;
		text-align: center;
		position: relative;
	}
	.button1{
		left: -100px;
		top: 50px;
		width: 94px;
		height: 34px;
		line-height: 34px;
		border-radius: 13px;
		/* background-color: rgba(13,122,247,1); */
		color: rgba(255,255,255,1);
		font-size: 14px;
		text-align: center;
	}
	.button2{
		left: 80px;
		top: 16px;
		width: 94px;
		height: 34px;
		line-height: 34px;
		border-radius: 13px;
		/* background-color: rgba(13,122,247,1); */
		color: rgba(255,255,255,1);
		font-size: 14px;
		text-align: center;
	}
	.header{
		margin-top: 1px;
		width: 100%;
		height: 83px;
		line-height: 83px;
		border: 1px solid rgba(187,187,187,1);
		
	}
	.header text {
		
		left: 89px;
		height: 25px;
		line-height: 25px;
		color: rgb(13,122,247);
		font-weight: bold;
		font-size: 18px;
		text-align: left;
		position: relative;
	}
	.header button{
		top: -60px;
		left: 90px;
		width: 117px;
		line-height: 34px;
		border-radius: 8px;
		background-color: rgba(255,255,255,1);
		color: rgba(16,16,16,1);
		font-size: 14px;
		font-weight: bold;
		text-align: center;
		border: 1px solid rgba(187,187,187,1);
		position: relative;
	}

	.button-group {
		display: flex;
		justify-content: center;
		gap: 20px;
		margin-top: 50px;
	}

	.coupon-content {
		display: flex;
		padding: 15px;
	}

	.left-section {
		width: 140px;
		border-right: 1px solid #FFFFFF;
	}

	.info-row {
		display: flex;
		align-items: center;
		margin-bottom: 8px;
	}

	.info-row text:first-child {
		margin-right: 10px;
		color: rgba(255,255,255,0.55);
	}

	.info-row text:last-child {
		color: rgba(255,255,255,0.8);
	}

	.rightText {
		flex: 1;
		padding-left: 20px;
		border-left: none;
		position: static;
		top: 0;
		left: 0;
	}

	/* 修改原有按钮样式 */
	.button1, .button2 {
		position: static;
		margin: 0;
	}

	/* 优化卡片样式 */
	.inProgress, .Ended {
		margin: 20px 17px;
		position: relative;
		height: auto;
		min-height: 101px;
	}

</style>
